import * as React from 'react';
import {observer} from 'mobx-react';
import {Form, Input} from 'antd';
import _ from 'lodash';

const FormItem = Form.Item;

interface InputBean{
    type?: string;
    autosize?: any; 
    style?:any;
    store: any; 
    myKey: string; 
    title: string; 
    labelCol: any; 
    wrapperCol: any;
    anscy?: boolean;
}

@observer
export class InputItem extends React.Component<InputBean,any> {
    render() {
        const {myKey, store, title, labelCol, wrapperCol, style, type, autosize, anscy = false} = this.props;
        const item = store.fields[myKey];

        return (
            <FormItem
                label={title}
                style={style}
                labelCol={labelCol}
                wrapperCol={wrapperCol}
                hasFeedback = {item.hasFeedback}
                required = {item.required}
                help = {item.help}
                validateStatus = {item.validateStatus}>
                <Input
                    type= {typeof type !== 'undefined' ? type : 'text'}
                    autosize = {typeof autosize !== 'undefined' ? autosize : false}
                    value={item.value}
                    disabled={item.disabled}
                    onChange={!anscy ? this.onChange : this.onAnscyChange}
                    onBlur={!anscy ? ()=>{} : this.onBlur}
                />
            </FormItem>
        )
    }

    onBlur = () =>{
        const {store,myKey} = this.props;
        const item = store.fields[myKey];
        store.asyncValid(myKey, item.value, !item.required);
    }

    onAnscyChange = (e) =>{
        const {store,myKey} = this.props;
        store.fields[myKey].value = e.currentTarget.value;
    }

    onChange = (e) =>{
        const {store,myKey} = this.props;
        const item = store.fields[myKey];
        store.valid(myKey, e.currentTarget.value, !item.required);
    }
}